.box{
  width: 100px;
  height: 100px;
  background-color: bisque;
}
.demo-1{
    &:hover{
        width: 500px;
    }
    transform: width 2s ease;
}
.demo-2{
    &:hover{
        transform: rotate(45deg);    
    }
    transition: transform 1s ease-out;
}
.demo-3{
    &:hover{
        .cell{
            animation: move 2s linear;
        }
    }
    .cell{
        width: 200px;
        height: 200px;
        background: red;
    }
}
@keyframes move{
    100%{
        transform: translateX(200px);
    }
}